



// 1. 下载Swiper 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Swiper ,  {
    Pagination,
    Autoplay,
    Navigation,
    coverflowEffect,
    EffectCoverflow,
    EffectCube,
    EffectFade,

  } from 'swiper'
import 'swiper/swiper.css'
import 'swiper/swiper-bundle.min.css'


// 2. 满足静态解构 
class MySwipe extends Component {
    render() {
        const {id , children } = this.props
        return (
            <div className='swiper' id={id}  >
                <div className='swiper-wrapper'>
                    {/* 匿名插槽  */}
                    {
                        children 
                    }
                </div>
            </div>
        );
    }

    // 3. 插件实例化
    componentDidMount(){
        const { id , options } = this.props;
        console.log(options) 
        let thisSwiper = new Swiper("#"+id,options)
    }
}

MySwipe.defaultProps = {
    id:'sone',
    options:{
        speed:2000,
        autoplay:true,
    }
}


MySwipe.Item = ({
    children
})=>{
    return (
        <div  className='swiper-slide' >
            {children}
        </div>
    )
}

export default MySwipe;
